
<template>
  <div>
    <p>商品分类</p>
    <van-search shape="round" background="orange" placeholder="请输入搜索关键词" />
    <div class="hang1">
      <div class="left">
        <van-sidebar v-model="activeKey" @chang="chang1">
          <van-sidebar-item :title="item.catename" v-for="item in list" :key="item.id" />
        </van-sidebar>
      </div>
      <div class="right">
        <van-grid :column-num="3">
          <van-grid-item
            v-for="item in list1"
            :key="item.id"
            :text="item.catename"
            :icon="url + item.img"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "cateIndex",
  data() {
    return {
      activeKey: 0,
      list: [],
      list1: [],
      list2: [],
      url: "https://api.aslegou.top/",
    };
  },
  mounted() {},
  created() {
    this.getList1();
    this.getList2();
  },
  methods: {
    async getList1() {
      let res = await this.$http.get("/getcates");

      this.list = res.data.list;
      this.list1 = res.data.list.children;
    },
    async getList2() {
      let res = await this.$http.get("/getcates");

      this.list1 = res.data.list[0].children;
      console.log(this.list1);
    },
    chang1(i) {
      let type = this.list1[i].type;
      this.lsit2 = this.list1.filter((item) => item.type.includes(type));
    },
  },
};
</script>
<style >
* {
  margin: 0;
  padding: 0;
}

p {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: white;
  font-weight: 600;
  background-color: orange;
}

.hang1 {
  width: 100vw;
  display: flex;
  justify-content: space-between;
}

.left {
  width: 20vw;
}

.right {
  width: 69vw;
}
</style>